<template>
    <div>
      <div class="main-tab">
        <x-header id="header" :left-options="{backText: ''}" class="top"><span class="tit">我的问答</span></x-header>
        <div class="main-headerAndTab">
          <div class="tab">
            <tab bar-active-color="#AD2532" :line-width="2" custom-bar-width="1.43rem" active-color="#AD2532" default-color="#9B9B9B">
              <tab-item selected  active-class="active-1" @click.native="handle1">提问</tab-item>
              <tab-item active-class="active-1" @click.native="handle2">回答</tab-item>
            </tab>
          </div>
          <div class="question" v-show="flag1">
            <group>
              <cell-box v-for="(item,index) in Qlist" :key="item.id">
                <img :src="item.img" alt="">
                <div class="Q-info">
                  <span class="Q-name">{{item.name}}</span>
                  <span class="Q-date">{{item.date}}<span class="Q-hour">{{item.hour}}</span></span>
                  <span class="Q-content">{{item.content}}</span>
                </div>
              </cell-box>
            </group>
          </div>
          <div class="answer" v-show="flag2">
            <group>
              <cell-box v-for="(item,index) in Qlist" :key="item.id">
                <img :src="item.img" alt="">
                <div class="Q-info">
                  <span class="Q-name">{{item.name}}</span>
                  <span class="Q-date">{{item.date}}<span class="Q-hour">{{item.hour}}</span></span>
                  <span class="Q-content">{{item.content}}</span>
                  <div class="A-info">
                    <span class="A-content">这个烟挺好抽的，我也尝试过</span>
                  </div>
                </div>
              </cell-box>
            </group>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "myQA",
      data(){
          return{
            flag1:true,
            flag2:false,
            Qlist:[
              {
                id:0,
                name:'王小二',
                date:'2019-01-01',
                hour:'09:00',
                content:'这个烟好抽不',
                img:'../../../static/img/my-off.png'
              },
              {
                id:1,
                name:'王小二',
                date:'2019-01-01',
                hour:'09:00',
                content:'这个烟好抽不',
                img:'../../../static/img/my-off.png'
              },
              {
                id:2,
                name:'王小二',
                date:'2019-01-01',
                hour:'09:00',
                content:'这个烟好抽不',
                img:'../../../static/img/my-off.png'
              },
            ]
          }
      },
      methods:{
        handle1(){
          this.flag1=true;
          this.flag2=false;
        },
        handle2(){
          this.flag2=true;
          this.flag1=false;
        },
      }
    }
</script>

<style scoped>
  .top{
    background: #AD2532;
    box-shadow: 0 0 0 0 rgba(0,0,0,0.25);
  }
  .tit{
    margin-top: 8px;
    font-family: "PingFangSC-Semibold",serif;
    font-size: 17px;
    color: #FFFFFF;
    letter-spacing: -0.41px;
    text-align: center;
  }
  .tab{
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.02), 0 2px 4px 0 rgba(173,37,50,0.05);
  }
  .active-1{
    font-family: "PingFangSC-Semibold",serif;
    font-size: 18px;
    color: #AD2532;
    letter-spacing: 0;
    text-align: center;
  }
  .question img{
    width: 3.57rem;
    height: 3.57rem;
    border: 1px solid #F4F4F4;
    border-radius:50%; overflow:hidden;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.08rem;
  }
  .Q-info{
    margin-left: 1.07rem;
    display: flex;
    flex-direction: column;
  }
  .Q-name{
    font-family: "PingFangSC-Semibold",serif;
    font-size: 17px;
    color: #030303;
    letter-spacing: -0.41px;
  }
  .Q-date{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: -0.29px;
    text-align: justify;
    margin-top: 0.36rem;
  }
  .Q-hour{
    margin-left: 0.36rem;
  }
  .Q-content{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    margin-top: 1.08rem;
  }
  .answer img{
    width: 3.57rem;
    height: 3.57rem;
    border: 1px solid #F4F4F4;
    border-radius:50%; overflow:hidden;
    align-items: center;
    justify-content: center;
    margin-bottom: 5rem;
  }
  .A-info{
    background: #F4F4F4;
    border-radius: 2px;
    width: 20rem;
    height: 2.86rem;
    margin-top: 0.79rem;
  }
  .A-content{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    text-align: justify;
    margin-left: 0.71rem;
  }
</style>
